<template>
    <el-container class="body-container">
        <el-aside class="side-container">
            <page-aside></page-aside>
        </el-aside>
        <el-main class="main-container">
            <page-main></page-main>
        </el-main>
    </el-container>
</template>

<script>
    import pageAside from './page-aside.vue'
    import pageMain from './page-main.vue'

    export default {
        components: {
            'page-aside': pageAside,
            'page-main': pageMain
        }
    }
</script>

<style scoped>
    .body-container {
        padding-top: 60px;
        height: 100%;
    }
    .side-container {
        width: 220px !important;
        height: 100%;
    }
    .main-container {
        height: 100%;
        padding: 20px 25px;
        background-color: #e4e7e8;
    }
</style>
